<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { copyText } from '../utils/utils.js';
import { initData } from '../config';

const mocksList = ref();

const showMessage = ref(false);
const msg = ref('')

type mockItem = {
  name: string;
  content: string;
  length?: number;
  fn: any,
  param?: any
}
const copy = (item: mockItem) => {
  copyText(item.content).then((status) => {
    if (status) {
      msg.value = '复制成功';
    } else {
      msg.value = '复制失败';
    }
    showMessage.value = true;
  });
}

const refresh = (item: mockItem) => {
  console.log('---- refresh ----:', item);
  const {fn, param, length} = item;
  if (length) {
    item.content = fn(Number(length));
    return;
  }
  if (Array.isArray(param)) {
    item.content = fn(...param)
  } else {
    item.content = fn(param);
  }
}

const handleInput = (item: mockItem) => {
  console.log('---- handleInput ----:', item);
  const {fn, length} = item;
  if (length) {
    item.content = fn(Number(length));
  }
}

const mockInit = () => {
  mocksList.value = initData;
}

onMounted(() => {
  mockInit()
})
</script>

<template>
  <div class="main-container">
    <h3 class="text-h6 text-center mb-2">数据Mock助手</h3>
    <v-row dense>
      <v-col
        v-for="(mock, i) in mocksList"
        :key="i"
        cols="4"
        md="6"
      >
        <v-card
          variant="elevated"
          class="mx-auto"
          color="surface-variant"
          max-width="344"
          :title="mock.name"
        >
          <v-card-text>
            <div class="text-left content-wrap" :title="'点击复制:'+mock.content" @click.native="copy(mock)">{{mock.content}}</div>
          </v-card-text>
          <template v-slot:actions>
            <div class="action-wrap">
              <v-btn class="mr-2" title="复制" icon="mdi-content-copy" density="comfortable" @click="copy(mock)"></v-btn>
              <v-btn icon="mdi-refresh" title="重生成" density="comfortable" @click="refresh(mock)"></v-btn>
              <v-responsive max-width="88">
                <v-text-field
                  v-if="mock.length !== undefined"
                  label="长度"
                  :min="1"
                  persistent-hint
                  title="在上下箭头上按下鼠标左键后上下拖动可以改变长度"
                  type="number"
                  v-model="mock.length"
                  variant="solo"
                  hide-details="auto"
                  density="compact"
                  @input="handleInput(mock)"
                  
                ></v-text-field>
              </v-responsive>
            </div>
          </template>
        </v-card>
      </v-col>
    </v-row>

    <v-snackbar v-model="showMessage" :timeout="2000">
      {{ msg }}
      <template v-slot:actions>
        <v-btn
          color="pink"
          variant="text"
          @click="showMessage = false"
        >
          关闭
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<style scoped>
.main-container{
  width: 580px;
  text-align: left;
  :deep(.v-card-text){
    padding-bottom: 0;
  }
}
.content-wrap{
  width: 100%;
  line-height: 1.2em;
  min-height: 2.4em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.content-wrap:hover{
  overflow: visible;
  text-overflow: unset;
  display: block;
}
.action-wrap{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
